<template>
  <div id="infrastructure"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

const initChart = () => {
  const chartDom = document.getElementById('infrastructure');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '基础设施配套图表'
    },
    tooltip: {},
    radar: {
      indicator: [
        { name: '学校', max: 100 },
        { name: '医院', max: 100 },
        { name: '银行', max: 100 },
        { name: '商场', max: 100 },
        { name: '公园', max: 100 }
      ]
    },
    color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'],
    series: [{
      name: '基础设施评分',
      type: 'radar',
      data: [
        {
          value: [85, 90, 80, 70, 75],
          name: '评分'
        }
      ]
    }]
  };

  myChart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped>
#infrastructure {
  width: 100%;
  height: 100%;
}
</style>